<template>
    <view class="byCasting">
        
        <view class="kong" v-if="carList.length == 0">
            <view class="top_b">
                <view class="sel_b">
                    <view class="txt_box hei" @click="openCard('syntheticCard')">
                        <text style="color: #222;">合成列表</text>
                        <image src="../../../static/syFactory/hei_xia.png" mode=""></image>
                    </view>
                </view>
                <view class="show_box" @click="showHe">
                    <image :src="isShowGou ? '../../../static/syFactory/lan_y.png' : '../../../static/syFactory/hui_y.png'" mode=""></image>
                    <text style="color: #222;">显示可合成</text>
                </view>
            </view>
            <image src="../../../static/syFactory/kong.svg" mode=""></image>
            <text v-if="isShowGou">暂无合成卡</text>
            <text v-if="!isShowGou">暂无合成活动，敬请期待</text>
        </view>
        <view class="card_Box" v-if="carList.length > 0">
            <image class="bg" src="../../../static/syFactory/zhu_bg.png" mode=""></image>
            <view class="top_b">
                <view class="sel_b">
                    <view class="txt_box" @click="openCard('syntheticCard')">
                        <text>合成列表</text>
                        <image src="../../../static/syFactory/bai_xia.png" mode=""></image>
                    </view>
                </view>
                <view class="show_box" @click="showHe">
                    <image :src="isShowGou ? '../../../static/syFactory/lan_gou.png' : '../../../static/syFactory/hui_y.png'" mode=""></image>
                    <text>显示可合成</text>
                </view>
            </view>
            <view class="banner">
                <swiper class="swiper" circular :indicator-dots="false" :autoplay="false" :current="bannerCurrent"
                    duration="500" @change="changeBanner">
                    <swiper-item v-for="(item,index) in carList">
                        <view class="imgBox">
                            <view class="imgArr">
                                <image class="b_kuan" src="../../../static/syFactory/b_kuan.png" mode=""></image>
                                <image class="z_img" :src="item.additionalValue" mode=""></image>
                            </view>
                        </view>
                        <view class="bottom_img">
                            <image src="../../../static/syFactory/dian_three.png" mode=""></image>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
        <view class="info_b" v-if="carList.length > 0">
            <view class="info_de">
                <view class="li_lable">
                	<view class="lable_item lable_xuanzhang" v-if="data.functionType==2">
                		<image src="/static/index/label04.png" mode="widthFix"></image>
                		<text class="lable_name ellipseHide">勋章NFR</text>
                	</view>
                	<view class="lable_item lable_equity" v-if="data.functionType==1">
                		<image src="/static/index/quanyi.png" mode="widthFix"></image>
                		<text class="lable_name ellipseHide">权益NFR</text>
                	</view>
                	<view class="lable_item lable_suanli" v-if="data.hashRate!=0">
                		<image src="/static/index/suanli.png" mode="widthFix"></image>
                		<text class="lable_name ellipseHide">算力:{{data.hashRate}}</text>
                	</view>
                	<block v-if="data.equityCardTagList.length>0">
                		<!-- <view class="lable_item lable_grade" :style="{'backgroundImage': `url(${nav.img})`}" v-for="(nav,zIndex) in item.equityCardTagList" :key="zIndex">
                			<text class="lable_name ellipseHide">{{nav.name}}</text>
                		</view> -->
                		<view class="lable_grade_box" v-for="(nav,zIndex) in data.equityCardTagList" :key="zIndex">
                			<image :src="nav.img"  mode=""></image>
                			<view class="lable_item lable_grade">
                				<text class="lable_name ellipseHide">{{nav.name}}</text>
                			</view>
                		</view>
                	</block>
                	<!-- <view class="lable_item lable_grade">
                		<image src="/static/index/label03.png" mode="widthFix"></image>
                		<text class="lable_name ellipseHide">等级 SSR</text>
                	</view> -->
                </view>
                <view class="info_name">{{data.castingEquityCardName}}</view>
                <view class="info_gx">
                    <view class="left">
                        <image :src="data.issuerLogo ? data.issuerLogo : '../../../static/syFactory/gx_icon.png'" mode=""></image>
                        <text>{{data.issuerName}}</text>
                    </view>
                    <view class="right" @click="goNfr">
                        <text>NFR详情</text>
                        <image src="../../../static/blindbox/jackpot/right_black.png" mode=""></image>
                    </view>
                </view>
            </view>
            <view class="cond_b">
                <view class="cond_lf">
                    <view class="xian"></view>
                    <text>合成条件</text>
                </view>
                <view class="cond_rig">合成概率：{{data.successRate}}%</view>
            </view>
            <view class="syn_card">
                <view class="syn_list" v-for="(item,index) in data.castingMaterials">
                    <image class="tou_img" :src="item.cover" mode=""></image>
                    <view class="card_info">
                        <view class="name">{{item.equityCardName}}</view>
                        <view class="num">需要数量：{{item.amount}}</view>
                        <view class="hava_box" v-if="isToken">
                            <view class="hava_num">持有数量：{{item.holdAmount}}</view>
                            <view class="sele_card" v-if="item.holdAmount > 0">
                                <view class="text_b" @click="handleCardNum(index)">
                                    <view class="ellipseHide" v-if="item.selCard.length > 0">
                                        <text v-for="(text,index) in item.selCard">{{text.value}}{{index < item.selCard.length -1 ? ',': ''}}</text>
                                    </view>
                                    <text v-if="item.selCard.length == 0">请选择合成卡号</text>
                                    <image src="../../../static/syFactory/hei_xia.png" mode=""></image>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="auto_b" @click="handleAutomatic" v-if="data.castingType == 1 && data.status == 3">
                <image :src=" automaticShow ? '../../../static/syFactory/lan_y.png' : '../../../static/syFactory/hui_y.png'" mode=""></image>
                <text>自动选择卡号</text>
            </view>
        </view>
        <view class="btnBox" v-if="carList.length > 0 && isToken">
            <view class="btn" @click="openPay" v-if="data.castingType == 1 && data.status == 3">立即合成</view>
            <view class="btn_1" v-if="data.status == 2">{{data.startTime}} 开始</view>
            <view class="btn_2"  v-if="data.status == 4">已结束</view>
            <view class="btn_1" v-if="data.status == 3 && data.castingType == 2">合成库存不足</view>
            <view class="btn_1" v-if="data.status == 3 && data.castingType == 3">合成材料不足</view>
        </view>
        <view class="btnBox" v-if="!isToken">
            <view class="btn" @click="handleLogin">立即登录</view>
        </view>
        
        <DetailDialog ref="popupBox" :data='data' v-if="popupBoxStatus" @determine="determine" @close='passwordClose' key='1'>
        </DetailDialog>
        
        
        <uni-popup ref="cardPopup" :animation="false" @maskClick="maskClick">
            <view class="cardBox" v-if="popopType == 'syntheticCard'"  @touchmove.prevent>
                <image class="pop_bg" src="../../../static/syFactory/pop_bg.png"></image>
                <view class="title">合成列表</view>
                <scroll-view scroll-y="true" class="scroll-Y" @scrolltoupper="upper">
                    <view :class="[ bannerCurrent == index? 'active' : '','cardlist'] " v-for="(item,index) in carList" @click="handleCard(item.id,index)">
                        {{item.value}}
                    </view>
                </scroll-view>
            </view>
            <view class="cardNum_b" v-if="popopType == 'needCard'"  @touchmove.prevent>
                <view class="title">
                    <view class="qu_btn_1"></view>
                    <text>请选择合成卡</text>
                    <view class="qu_btn" @click="changeCardNumPopup">确认</view>
                </view>
                <scroll-view scroll-y="true" class="scroll-Y" @scrolltoupper="upper">
                    <view  v-if="data.castingMaterials[cardNumIndex].amount > 1" 
                        class="cardNum_l" 
                        v-for="item in data.castingMaterials[cardNumIndex].cardNoList" 
                        @click="handleSelCard(item.id)">
                        <image :src="item.cardCurrent ? '../../../static/syFactory/card_y.png' : '../../../static/syFactory/card_n.png'" mode=""></image>
                        {{item.value}}
                    </view>
                    <view v-if="data.castingMaterials[cardNumIndex].amount == 1" 
                         class="cardNum_l" 
                        v-for="item in data.castingMaterials[cardNumIndex].cardNoList" 
                        @click="handleOneSelCard(item.id)">
                        <image :src="item.cardCurrent ? '../../../static/syFactory/card_y.png' : '../../../static/syFactory/card_n.png'" mode=""></image>
                         {{item.value}}
                     </view>
                </scroll-view>
            </view>
            <view class="status_box" v-if="popopType == 'statusCard'"  @touchmove.prevent>
                <view class="status_bg">
                    <image  src="../../../static/syFactory/kuan.png" mode=""></image>
                </view>
                
                <view class="status_ma">
                    <block v-if="paydata.status == 2">
                        <image class="img" src="../../../static/syFactory/succes_icon.png" mode=""></image>
                        <text>恭喜合成成功</text>
                        <view class="succesImg">
                            <image class="b_kuan" src="../../../static/syFactory/b_kuan.png" mode=""></image>
                            <image class="coverImg" :src="data.cover" mode="" ></image>
                        </view>
                    </block>
                    <block v-if="paydata.status == 1">
                        <image class="img" src="../../../static/syFactory/error_icon.png" mode=""></image>
                        <text>合成失败</text>
                        <view class="succesImg">
                            <image class="b_kuan" src="../../../static/syFactory/b_kuan.png" mode=""></image>
                            <image class="lieImg" src="../../../static/syFactory/lie_icon.png" mode=""></image>
                            <image class="coverImg" :src="data.cover" mode="" style="filter: grayscale(1)"></image>
                        </view>
                    </block>
                    
                </view>
                <view class="status_btn">
                    <view class="btn" v-if="paydata.status == 2" @click="handleAccept">开心收下</view>
                    <view class="btn" v-if="paydata.status == 1" @click="handleAccept">再接再厉</view>
                </view>
            </view>
        </uni-popup>
        
    </view>
</template>

<script>
    import {
    	rsaEncrypt,
    } from '@/common/RSA.js' //加密js
    import DetailDialog from './components/DetailDialog.vue'
    import {
    	castingSelect,
        castingDetail,
        payCasting
    } from '@/api/api-v1-2.js'
    export default {
        components: {
        	DetailDialog,
        },
        data() {
            return {
                isShowGou: false,//显示可合成
                automaticShow: false,
                equityCardTagList: [],
                popupBoxStatus: false,
                data: {},
                carList: [],// 合成卡列表
                cardNumIndex: 0,
                cardCurrent: '',
                form:{
                  id: '',
                  useEquityCardId: [],
                  password: '',
                },
                paydata: {},//支付结果
                popopType: '',
                bannerCurrent: 0,
                isToken: false,
            }
        },
        onLoad() {
            this.getCardList()
            var token = this.$queue.getData('token')
            console.log('token',token)
            if(token){
                this.isToken = true
            }else{
                this.isToken = false
            }    
        },
        onShow() {
          this.popupBoxStatus = false  
        },
        mounted() {
            // this.openCard()
        },
        methods: {
            //切换轮播
            changeBanner(e){
                console.log(e)
                var id = this.carList[e.detail.current].id
                this.bannerCurrent = e.detail.current
                this.automaticShow = false
                this.getDetail(id)
                console.log('bannerCurrent',this.bannerCurrent)
            },
            //获取合成列表
            getCardList(){
               
                var data = {
                    isCanCasting: this.isShowGou ? 1 : ''
                }
                castingSelect(data).then(res => {
                    console.log(res)
                    this.carList = res.result
                    console.log(this.carList.length)
                    if(this.carList.length > 0){
                        this.getDetail(this.carList[0].id)
                    }
                })
                
            },
            // 获取详情
            getDetail(id){
                console.log('id',id)
                castingDetail(id).then(res => {
                	console.log(res)
                	this.data = res.result
                    this.data.castingMaterials.forEach(aitem => {
                        aitem.selCard = []
                        aitem.cardNoList.forEach(bitem => {
                            bitem.cardCurrent = false
                        })
                    })
                    console.log('this.data.castingMaterials',this.data.castingMaterials)
                })
            },
            //显示合成
            showHe(){
                this.isShowGou = !this.isShowGou
                this.bannerCurrent = 0
                this.carList = []
                this.getCardList()
            },
            //选择合成卡 ---多选
            handleSelCard(id){
                console.log(id)
                // console.log('this.cardNumIndex',this.data.castingMaterials[this.cardNumIndex])
                this.data.castingMaterials[this.cardNumIndex].cardNoList = this.data.castingMaterials[this.cardNumIndex].cardNoList.map(item => {
                    if(item.id == id){
                        if(item.cardCurrent){
                            item.cardCurrent = false
                        }else{
                            item.cardCurrent = true
                        }
                    }
                    return item
                })
                // console.log('this.data.castingMaterials[this.cardNumIndex].',this.data.castingMaterials[this.cardNumIndex].cardNoList)
                
            },
            //选择合成卡 ---单选
            handleOneSelCard(id){
                console.log('单',id)
                // console.log('this.cardNumIndex',this.data.castingMaterials[this.cardNumIndex])
                this.data.castingMaterials[this.cardNumIndex].cardNoList = this.data.castingMaterials[this.cardNumIndex].cardNoList.map(item => {
                    if(item.id == id){
                        item.cardCurrent = true
                    }else{
                        item.cardCurrent = false
                    }
                    return item
                })
                
            },
            //确认
            changeCardNumPopup(e){
                var selCard = []
                this.data.castingMaterials[this.cardNumIndex].cardNoList = this.data.castingMaterials[this.cardNumIndex].cardNoList.map(item => {
                    if(item.cardCurrent){
                        selCard.push(item)
                    }
                    return item
                })
                if(selCard.length > this.data.castingMaterials[this.cardNumIndex].amount){
                    var amount = this.data.castingMaterials[this.cardNumIndex].amount
                    uni.showToast({
                        title: `最多选择${amount}张`,
                        icon: 'none'
                    })
                }else{
                    this.data.castingMaterials[this.cardNumIndex].selCard = selCard
                    this.closeCard()
                }
            },
            handleCard(id,index){
                this.getDetail(id)
                this.closeCard()
                this.bannerCurrent = index
            },
            //打卡号选择
            handleCardNum(index){
                this.popopType = 'needCard'
                this.cardNumIndex = index
                this.$refs.cardPopup.open('bottom')
                this.data.castingMaterials[index].cardNoList = this.data.castingMaterials[index].cardNoList.map(item => {
                    this.data.castingMaterials[index].selCard.map(aitem => {
                        if(item.id == aitem.id){
                            item.cardCurrent = true
                        }
                    })
                    return item
                })
                console.log('哈哈哈哈',this.data.castingMaterials[index].cardNoList)
            },
            //自动合成
            handleAutomatic(){
                this.automaticShow = !this.automaticShow
                if(this.automaticShow){
                     this.automaticSelCard()
                }else{
                    this.data.castingMaterials = this.data.castingMaterials.map(item => {
                        item.selCard = []
                        return item
                    })
                    this.data.castingMaterials = this.data.castingMaterials.map(item => {
                        item.cardNoList.map(aitem => {
                            aitem.cardCurrent = false
                        })
                        return item
                    })
                }
            },
            //自动选择卡号
            automaticSelCard(){
                console.log('cardNo',this.data.castingMaterials)
                this.data.castingMaterials = this.data.castingMaterials.map(item => {
                        
                        item.selCard = item.cardNoList.slice(0,item.amount)
                        return item
                       
                })
                console.log('this.data.castingMaterials',this.data.castingMaterials)
            },
            // 立即合成
            openPay() {
                // this.bannerCurrent = 3
                var isPay = true
                this.data.castingMaterials.forEach(item => {
                     console.log('isPay',item.selCard.length)
                    if(item.selCard.length == 0){
                        isPay = false
                    }
                })
                if(isPay){
                    this.popupBoxStatus = true
                }else{
                    uni.showToast({
                       title: '请选择合成卡',
                       icon: 'none'
                    })
                }
                
                
            },
            
            //去登陆
            handleLogin(){
                uni.showToast({
                    title:'请先登录',
                    icon: 'none'
                })
                setTimeout(() => {
                	uni.reLaunch({
                		url: '/pages/login/login'
                	})
                }, 1000)
            },
            passwordClose() {
            	this.popupBoxStatus = false
            },
            openCard() {
                this.popopType = 'syntheticCard'
                this.$refs.cardPopup.open('center')
            },
            closeCard() {
                this.$refs.cardPopup.close()
            },
            //nfr详情
            goNfr(){
                uni.navigateTo({
                    url:'/pages/syFactory/byCasting/nfrDetail/nfrDetail?id='+this.data.castingEquityCardId
                })
            },
            //弹窗关闭
            maskClick(e){
                var type = this.popopType
                if(type == 'statusCard'){
                    this.getCardList()
                }
            },
            //支付后关闭
            handleAccept(){
                this.bannerCurrent = 0
                this.closeCard()
                this.getCardList()
                
            },
            // 确认支付
            async determine(e) {
            	uni.showLoading({
            		title:'加载中',
            		mask:true
            	})
                var useEquityCardId = []
                console.log('合成卡数组',this.data.castingMaterials)
                this.data.castingMaterials.forEach(item => {
                    item.selCard.forEach(bitem => {
                       useEquityCardId.push(bitem.id)
                    })
                })
            	var data = {
            		password: e,
            		id: this.data.id,
                    useEquityCardId: useEquityCardId
            	}
                console.log('data',data)
            	let jiami = rsaEncrypt(JSON.stringify(data)) //rsa加密
            	let params = {
            		encryptData: jiami
            	}
                
                payCasting(params).then(res => {
                	console.log(res)
                    this.paydata = res.result
                	uni.hideLoading()
                    this.popupBoxStatus = false
                    this.popopType = 'statusCard'
                    this.$refs.cardPopup.open('center')
                    this.automaticShow = false
                    
                }).catch(() => {
                    	uni.hideLoading()
                    	this.$refs.popupBox.password = ''
                })
            
            },
        }
    }
</script>

<style scoped>
.card_Box{
    width: 100%;
    height: 776rpx;
    position: relative;
}
.card_Box .bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.top_b{
    position: absolute;
    top: 0;
    left: 0;
    padding: 40rpx 40rpx 0 40rpx;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 99;
}
.top_b .sel_b{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.top_b .sel_b .hei{
    color: #222;
}
.top_b .sel_b .txt_box{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.top_b .sel_b .txt_box text{
    font-size: 30rpx;
    color: #fff;
}
.top_b .sel_b .txt_box image{
    width: 18rpx;
    height: 10rpx;
    margin-left: 14rpx;
}
.top_b .show_box{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.top_b .show_box text{
    font-size: 28rpx;
    color: #fff;
}
.top_b .show_box image{
    width: 28rpx;
    height: 28rpx;
    margin-right: 14rpx;
}
.banner {
    position: relative;
    padding-top: 100rpx;
}
.banner .swiper{
    height: 580rpx;
}
.banner .imgBox{
    width: 100%;
    height: 444rpx;
    display: flex;
    justify-content: center;
    margin-top: 40rpx;
}
.banner .imgBox .imgArr{
    position: relative;
    width: 630rpx;
    height: 444rpx;
}
.banner .imgBox .b_kuan{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
}
.banner .imgBox .z_img{
    width: 630rpx;
    height: 444rpx;
    border-radius: 24rpx;
}

.banner .bottom_img{
    margin-top: 54rpx;
    width: 100%;
}
.banner .bottom_img image{
    width: 100%;
    height: 36rpx;
}
.info_b{
    border-radius: 30px 30px 0px 0px;
    width: 100%;
    margin-top: -70rpx;
    z-index: 99;
    background: #F7F8FA;
    position: relative;
    padding-bottom: 280rpx;
}
.info_de{
    padding: 40rpx;
}
.li_lable{
    display: flex;
    flex-wrap: wrap;
    /* flex-direction: row; */
    /* margin-top: 48rpx; */
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 22rpx;
    color: #FFFFFF;
}
.lable_item{
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 10rpx;
    padding-left: 30rpx;
    padding-right: 10rpx;
    /* padding: 4rpx 10rpx 4rpx 26rpx; */
    box-sizing: border-box;
    min-width: 126rpx;
    max-width: 280rpx;
    height: 36rpx;
    margin-bottom: 20rpx;
    line-height: 36rpx;
}
.lable_item image{
    position: absolute;
}

.lable_xuanzhang image{
    top: -7rpx;
    left: -20rpx;
    width: 44rpx;
    height: 44rpx;
}
.lable_xuanzhang {
    margin-left: 10rpx;
    background: linear-gradient(90deg, #FF8540 4.62%, #FF4926 105.38%);
    border-radius: 0rpx 200rpx 200rpx 0rpx;
    /* background: url('/static/index/lable_bg01.png') no-repeat;
    background-size: 100% 100%; */
}
.lable_equity image{
    top: -6rpx;
    left: -23rpx;
    width: 44rpx;
    height: 44rpx;
}
.lable_equity {
    margin-left: 25rpx;
    /* background: url('/static/index/lable_bg02.png') no-repeat;
    background-size: 100% 100%; */
    background: linear-gradient(90deg, #5C4117 4.62%, #2D3332 105.38%);
    border-radius: 0rpx 200rpx 200rpx 0rpx;
}
.lable_grade_box{
    position: relative;
    margin-left: 16rpx;
    height: 38rpx;
}
.lable_grade_box image{
    width: 69px;
    height: 38rpx;
}
.lable_grade image{
    height: 36rpx;
    position: absolute;
    top: 0;
    /* top: -5rpx;
    left: -24rpx;
    width: 44rpx;
    height: 44rpx; */
}
.lable_grade {
    position: absolute;
    top: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-left: 16rpx;
    /* background: url('/static/index/lable_bg03.png') no-repeat;
    background-size: 100% 100%; */
    /* background: linear-gradient(90deg, #D0A043 4.62%, #BA7D37 105.38%); */
    border-radius: 0rpx 200rpx 200rpx 0rpx;
}
.lable_suanli image{
    top: -5rpx;
    left: -24rpx;
    width: 44rpx;
    height: 44rpx;
}
.lable_suanli{
    margin-left: 36rpx;
    background: linear-gradient(90deg, #9D5AFF 4.62%, #4F56FF 105.38%);
    border-radius: 0rpx 200rpx 200rpx 0rpx;
}
.info_name{
    font-size: 40rpx;
    color: #222;
    margin-top: 20rpx;
}
.info_gx{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12rpx;
}
.info_gx .left{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.info_gx .left image{
    width: 44rpx;
    height: 44rpx;
    border-radius: 6rpx;
}
.info_gx .left  text{
    font-size: 28rpx;
    color: #222;
    margin-left: 8rpx;
}
.info_gx .right{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.info_gx .right image{
    width: 15rpx;
    height: 22rpx;
    margin-top: 4rpx;
}
.info_gx .right  text{
    font-size: 40rpx;
    color: #222;
    font-weight: 500;
    margin-right: 12rpx;
    
}
.cond_b{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    
}
.cond_lf{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.cond_lf .xian{
    width: 6rpx;
    height: 30rpx;
    background: linear-gradient(180deg, #0B87F2 0%, #6752EA 100%)
}
.cond_lf text{
    font-size: 32rpx;
    color: #222;
    margin-left: 10rpx;
}
.cond_rig{
    font-size: 30rpx;
    color: #222;
}
.syn_card{
    width: 710rpx;
    background: #FFFFFF;
    box-shadow: 0px 0px 15px #ECECEC;
    border-radius: 12px;
    padding: 0 24rpx;
    box-sizing: border-box;
    margin: 40rpx auto 0 auto;
}
.syn_list{
    display: flex;
    justify-content: flex-start;
    padding: 44rpx 0 38rpx 0;
    border-bottom: 1rpx solid #D9D9D9;
}
.syn_list:nth-last-child(1){
    border: none;
}
.syn_list .tou_img{
  width: 134rpx;
  height: 134rpx;
  border-radius: 12rpx;
}
.card_info{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 20rpx;
    flex: 1;
}
.card_info .name{
    font-size: 30rpx;
    color: #222;
    font-weight: 500;
}
.card_info .num{
    font-size: 28rpx;
    color: #666;
}
.card_info .hava_box{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.hava_box .hava_num{
    font-size: 28rpx;
    color: #666;
}
.sele_card{
   
    border: 1rpx solid #9B9B9B;
    border-radius: 2px;
    position: relative;
    
}
.pickerBox{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    
}
.sele_card .text_b{
   width: 234rpx;
   height: 42rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12rpx;
    box-sizing: border-box;
}
.sele_card .text_l{
    
}
.sele_card .text_b text{
    font-size: 26rpx;
    color: #999;
}
.sele_card .text_b image{
    width: 18rpx;
    height: 10rpx;
}
.auto_b{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 40rpx;
    margin-top: 30rpx;
}
.auto_b text{
    margin-left: 10rpx;
    font-size: 28rpx;
    color: #222;
}
.auto_b image{
    width: 28rpx;
    height: 28rpx;
}
.cardBox{
    width: 670rpx;
    max-height: 650rpx;
    border-radius: 40rpx;
    background: #fff;
    position: relative;
    padding-bottom: 100rpx;
}
.cardBox .pop_bg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}
.cardBox .title{
    position: relative;
    width: 100%;
    height: 106rpx;
    font-size: 40rpx;
    text-align: center;
    line-height: 106rpx;
    color: #222;
    font-weight: 600;
}
.cardBox .scroll-Y {
    position: relative;
    max-height: 500rpx;
    width: 633rpx;
    border-radius: 24rpx;
    padding: 0 32rpx;
    box-sizing: border-box;
    background: #fff;
    margin: 0 auto;
    border: 2rpx solid #E2E2E2;
}
.cardBox .cardlist{
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    box-sizing: border-box;
    font-size: 30rpx;
    color: #222222;
    font-weight: 500;
    border-bottom: 1rpx solid #E2E2E2;
}
.cardBox .active{
    color: #0859F5 !important;
}
.cardNum_b{
    width: 100%;
    max-height: 600rpx;
    border-radius: 16px 16px 0px 0px;
    background: #fff;
    z-index: 999;
    position: relative;
    padding-top: 80rpx;
}
.cardNum_b .title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40rpx;
    height: 100rpx;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 80rpx);
    border-radius: 16px 16px 0px 0px;
}
.cardNum_b .title .qu_btn_1{
    height: 50rpx;
    padding: 0 20rpx;
    line-height: 50rpx;
    border-radius: 6rpx;
    color: #fff;
    width: 100rpx;
    background: #fff;
}
.cardNum_b .title text{
    font-size: 32rpx;
    font-weight: 600;
    color: #222;
}
.cardNum_b .title .qu_btn{
    background:linear-gradient(90deg, #2720DE 0%, #6F00FC 98.24%);;
    height: 50rpx;
    line-height: 50rpx;
    border-radius: 6rpx;
    color: #fff;
    width: 100rpx;
    text-align: center;
}
.cardNum_b .scroll-Y {
    max-height: 600rpx;
    min-height: 400rpx;
    margin-top: 28rpx;
}
.cardNum_l{
    width: 100%;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    box-sizing: border-box;
    font-size: 32rpx;
    color: #222222;
    font-weight: 500;
    
}
.cardNum_l image{
    width: 28rpx;
    height: 28rpx;
    margin-right: 16rpx;
}
.cardNum_b .active{
    color: #007AFF !important;
}
.status_box{
    width: 686rpx;
    height: 1000rpx;
    position: relative;
}
.status_box .status_bg{
    position: absolute;
    top: 100rpx;
    left: 0;
    width: 686rpx;
    height: 748rpx;
}
.status_box .status_bg image{
    width: 100%;
    height: 100%;
}
.status_ma{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: -180rpx;
}
.status_ma .img{
    width: 280rpx;
    height: 260rpx;
    
}
.status_ma text{
    font-size: 44rpx;
    font-weight: 600;
    /* color: #3767FF; */
    background: linear-gradient(90deg, #3767FF 5.56%, #701CF9 97.69%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
.status_ma .succesImg{
    width: 482rpx;
    height: 340rpx;
    position: relative;
    margin-top: 28rpx;
    margin-left: -20rpx;
}
.status_ma .succesImg .b_kuan{
    position: absolute;
    top: 0;
    left: 0;
    width: 104%;
    height: 104%;
    z-index: 9;
}
.status_ma .succesImg .coverImg{
    width: 100%;
    height: 100%;
    
}
.status_ma .succesImg .lieImg{
    position: absolute;
    left: 80px;
    top: -14rpx;
    width: 168rpx;
    height: 108%;
    z-index: 999;
}
.status_btn{
    display: flex;
    justify-content: center;
    margin-top: 80rpx;
    width: 100%;
    position: absolute;
    bottom: 0;
}
.status_btn .btn{
    width: 286rpx;
    height: 92rpx;
    border-radius: 8rpx;
    text-align: center;
    line-height: 92rpx;
    background: linear-gradient(90deg, #42BBFF 0%, #FF3CE7 98.24%);
    font-size: 32rpx;
    color: #fff;
}
.btnBox{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1rpx solid #E2E2E2;
    padding: 28rpx 0 40rpx 0;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99;
    background: #fff;
}
.btnBox .btn{
    width: 690rpx;
    height: 88rpx;
    background: linear-gradient(90deg, #2720DE 0%, #6F00FC 98.24%);
    border-radius: 6px;
    text-align: center;
    line-height: 88rpx;
    color: #fff;
    font-size: 36rpx;
}
.btnBox .btn_1{
    width: 690rpx;
    height: 88rpx;
    background: linear-gradient(90deg, #C1BAFF 0%, #D3AFFF 98.24%);
    border-radius: 6px;
    text-align: center;
    line-height: 88rpx;
    color: #fff;
    font-size: 36rpx;
}
.btnBox .btn_2{
    width: 690rpx;
    height: 88rpx;
    background: #ADADAD;
    border-radius: 6px;
    text-align: center;
    line-height: 88rpx;
    color: #fff;
    font-size: 36rpx;
}
.kong{
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 320rpx;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    
}
.kong image{
    width: 480rpx;
    height: 262rpx;
}
.kong text{
    font-size: 28rpx;
    color: #999;
    font-size: 28rpx;
}
</style>








